<template>
<div @mouseover="enter" @mouseleave="leave">
    <Dropdown  >
        <a href="javascript:void(0)">
            <div  class="avatar">
                <Avatar :style="{background: '#2b85e4'}" shape="square" icon="ios-person" >{{ user }}</Avatar>
                <Icon type="ios-arrow-down"></Icon>
                <!-- <Icon v-show="hover" :class="hover ? 'animate__animated animate__rotateIn animate__fast' : ''" type="ios-arrow-up" />
                <Icon v-show="!hover" :class="hover ? '' : 'animate__animated animate__rotateIn animate__fast'" type="ios-arrow-down" /> -->
                    
            </div>

        </a>
        <DropdownMenu slot="list">
            <DropdownItem>个人信息</DropdownItem>
            <a @click="logout">
                <DropdownItem>退出登录</DropdownItem>
            </a>
            
        </DropdownMenu>
    </Dropdown>
</div>
    
    
</template>
<script>
    export default {
        props:['user'],
        data () {
            return {
               hover:false
            }
        },
        methods: {
            enter(){
                this.hover = true
            },
            leave(){
                this.hover = false

            },
            logout() {
                window.localStorage.clear()
                this.$router.replace('/login')
            }
        }        
    }
</script>
<style scoped>
.avatar{
    color:white;
}

</style>
